<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <comp1 v-bind:parentmsg="msg" @func="getMsgFromSon"></comp1>
    </div>

    <template id="temp1">
        <div>
            <h1>这是子元素 == {{parentmsg}}</h1>
            <input type="button" value="像父组件传值" @click="sendMsg">
        </div>
    </template>
</body>
<script>
    var comp1 = {
        template: '#temp1',
        props: ['parentmsg'],
        data() {
            return {
                msg: '给父组件的数据'
            }
        },
        methods:{
            sendMsg(){
                this.$emit('func',this.msg);
            }
        }
    }

    var vm = new Vue({
        el: "#app",
        data: {
            msg: "这是父组件中的数据",
            msgFromSon: ''
        },
        methods: {
            getMsgFromSon(data) {
                this.msgFromSon = data;
                console.log(this.msgFromSon);
            }
        },
        components: {
            comp1
        }
    });
</script>

</html>